<template>
  <div class="filtrate">
    <ul>
      <li class="flex">
        <div class="label tr no-select">分类：</div>
        <div class="content">
          <template v-for="tag in classifyTags">
            <a-checkable-tag
              :key="tag.id"
              :checked="selectedClassifyTags.indexOf(tag.id) > -1"
              @change="
                checked =>
                  handleChange(tag, checked, 'selectedClassifyTags', 'id')
              "
            >
              <span class="cursor-pointer no-select"
                >{{ tag.categoryName }}
              </span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
      <li class="flex">
        <div class="label tr no-select">状态：</div>
        <div class="content">
          <template v-for="tag in statusTags">
            <a-checkable-tag
              :key="tag.value"
              :checked="selectedStatusTags.indexOf(tag.value) > -1"
              @change="
                checked =>
                  handleChange(tag, checked, 'selectedStatusTags', 'value')
              "
            >
              <span class="cursor-pointer no-select">{{ tag.desc }}</span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
    </ul>
    <!-- <div class="powerSearch">
      <c-button type="link" @click="powerSearchVisible = true"
        >高级搜索</c-button
      >
    </div> -->
    <!-- <c-modal
      v-model="powerSearchVisible"
      title="高级搜索"
      :width="800"
      destroyOnClose
    >
      <Search />
    </c-modal> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import quotation from "@/dict/quotation";
// import Search from "./search";

export default {
  components: {
    // Search
  },
  data() {
    return {
      selectedStatusTags: ["all"],
      selectedClassifyTags: ["all"],
      powerSearchVisible: false
    };
  },
  computed: {
    ...mapState(["resource"]),
    statusTags() {
      let res = {
        all: {
          desc: "全部",
          value: "all"
        },
        ...quotation.status
      };
      return res;
    },
    // 获取所有分类
    classifyTags() {
      let res = JSON.parse(JSON.stringify(this.resource.categoryRootMenu));
      res.unshift({
        categoryName: "全部",
        id: "all"
      });
      return res;
    }
  },
  methods: {
    handleChange(tag, checked, selectedTags, val) {
      this[selectedTags] = [tag[val]];
      if (selectedTags === "selectedClassifyTags") {
        this.$emit("changeClass", tag);
      }
      if (selectedTags === "selectedStatusTags") {
        this.$emit("changeStatus", tag);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filtrate {
  border-radius: 4px;
  position: relative;
  li {
    .label {
      width: 50px;
    }
    .content {
      padding-left: 15px;
    }
    .ant-tag {
      font-size: 14px;
    }
  }
  li:nth-child(1) {
    padding-bottom: 20px;
  }
  .powerSearch {
    position: absolute;
    top: 0;
    right: 0;
    .c-button {
      height: auto;
    }
  }
}
</style>
